<script setup lang="ts">
import updPassModel from './viewModel/updPassModel'
import { verifyPasswordStrength } from '@/utils/toolsValidate'
import { useAppsStore } from '@/stores/modules/app'
import { useRouter } from 'vue-router'
import type { FormInst, FormRules, FormItemRule } from 'naive-ui'
import type { ModelType } from './viewModel/updPassModel'
import { useTemplateRef } from 'vue'
defineOptions({
  name: 'UpdPass',
})
const router = useRouter()
const queryForm = ref<ModelType>(updPassModel.data)
const getPasswordStrength = computed(() => {
  const innerValue = unref(queryForm.value.password)
  const score = innerValue ? verifyPasswordStrength(innerValue) : -1
  return score
})
const getReenteredPasswordStrength = computed(() => {
  const innerValue = unref(queryForm.value.reenteredPassword)
  const score = innerValue ? verifyPasswordStrength(innerValue) : -1
  return score
})
const validatePasswordStartWith = (_: FormItemRule, value: string): boolean => {
  return (
    !!queryForm.value.password &&
    queryForm.value.password.startsWith(value) &&
    queryForm.value.password.length >= value.length
  )
}
const validatePasswordSame = (_: FormItemRule, value: string): boolean => {
  return value === queryForm.value.password
}
updPassModel.addRules('reenteredPassword', [
  {
    required: true,
    message: '请再次输入密码',
    trigger: ['input', 'blur'],
  },
  {
    validator: validatePasswordStartWith,
    message: '两次密码输入不一致',
    trigger: 'input',
  },
  {
    validator: validatePasswordSame,
    message: '两次密码输入不一致',
    trigger: ['blur', 'password-input'],
  },
])
const rules: FormRules = updPassModel.getRules()
const ruleForm = useTemplateRef<FormInst | null>('ruleForm')
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  ruleForm.value?.validate((errors) => {
    if (!errors) {
      const useStore = useAppsStore()
      updPassModel
        .save(queryForm.value)
        .then(() => {
          const { signOut } = useStore
          signOut()
          router.replace('/login')
          msgUtil.$message.success('修改成功')
        })
        .catch((err) => {
          console.log(err)
          msgUtil.$message.error(err)
        })
    }
  })
}
</script>
<template>
  <div class="form">
    <n-form ref="ruleForm" :model="queryForm" :rules="rules">
      <n-form-item label="原密码" path="oldPass">
        <n-input v-model:value="queryForm.oldPass" placeholder="请输入" />
      </n-form-item>
      <n-form-item label="新密码" path="password">
        <div class="w-full">
          <n-input v-model:value="queryForm.password" placeholder="请输入" />
          <div class="prefixCls-bar">
            <div class="prefixCls-bar--fill" :data-score="getPasswordStrength"></div>
          </div>
        </div>
      </n-form-item>
      <n-form-item label="确认密码" first path="reenteredPassword">
        <div class="w-full">
          <n-input v-model:value="queryForm.reenteredPassword" placeholder="请输入" />
          <div class="prefixCls-bar">
            <div class="prefixCls-bar--fill" :data-score="getReenteredPasswordStrength"></div>
          </div>
        </div>
      </n-form-item>
      <n-button type="primary" attr-type="button" @click="handleValidateClick">
        <span>提交</span>
      </n-button>
    </n-form>
  </div>
</template>

<style scoped lang="scss">
.form {
  padding-bottom: 20px;
  .prefixCls {
    &-bar {
      position: relative;
      height: 6px;
      margin: 10px auto 6px;
      background-color: grey;
      border-radius: 6px;

      &::before,
      &::after {
        position: absolute;
        z-index: 10;
        display: block;
        width: 33%;
        height: inherit;
        background-color: transparent;
        border-color: white;
        border-style: solid;
        border-width: 0 5px;
        content: '';
      }

      &::before {
        left: 33%;
      }

      &--fill {
        position: absolute;
        width: 0;
        height: inherit;
        background-color: transparent;
        border-radius: inherit;
        transition:
          width 0.5s ease-in-out,
          background 0.25s;

        &[data-score='1'] {
          width: 33%;
          background-color: #f56c6c;
        }

        &[data-score='2'] {
          width: 67%;
          background-color: #e6a23c;
        }

        &[data-score='3'] {
          width: 100%;
          background-color: #67c23a;
        }
      }
    }
  }
}
</style>
